<template>
  <div :class="['task-bar',window.max && window.tack ? 'task-bar-h':'task-bar-v']" @contextmenu.prevent="$emit('taskBarRightClick',$event)">
    <div class="task-bar-start-btn fas fa-globe" @click="$emit('startClick',$event)" @contextmenu.prevent.stop />
    <div class="task-bar-item-group">
      <div
        v-for="(item,index) in data"
        :key="index"
        :class="['task-bar-item',{'task-bar-item-active':item.window && item.window.active }]"
        :title="item.name"
        @contextmenu.prevent.stop="$emit('taskItemRightClick',item,index,$event)"
        @click="$emit('taskItemClick',item,index,$event)"
      >
        <icon-show class="task-bar-item-icon" :src="item" />
        <span class="task-bar-item-text">{{ item.name }}</span>
      </div>
    </div>
    <digit-clock class="task-bar-clock" @contextmenu.native.prevent.stop />
    <div class="task-bar-alarm">
      <el-popover
        placement="top"
        width="500"
        trigger="click"
      >
        <el-table :data="stationEvent" max-height="800" :default-sort="{prop: 'time', order: 'descending'}">
          <el-table-column property="time" label="告警时间" sortable show-overflow-tooltip :formatter="formatter" />
          <el-table-column property="station" label="变电站" show-overflow-tooltip />
          <el-table-column property="point" label="设备名称" show-overflow-tooltip />
          <el-table-column property="tname" label="告警类型" show-overflow-tooltip />
        </el-table>
        <el-button slot="reference" type="text" class="btn-bell">
          <el-badge :value="eventCount" :max="99">
            <!-- <i v-if="isactive" class="el-icon-bell"></i><img v-else src="@assets/image/006f.gif" class="img-bell"/> -->
            <i class="el-icon-bell" />
          </el-badge>
        </el-button>
      </el-popover>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'TaskBar',
  components: {
    DigitClock: () => import('@components/DigitClock.vue'),
    IconShow: () => import('@components/IconShow.vue')
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      synth: window.speechSynthesis,
      isactive: true,
      alarmBell: null,
      defaultStyle: {
        x: 10,
        y: 20,
        w: 400,
        h: 300,
        z: 0,
        tack: false,
        max: false,
        min: false,
        active: false
      }
    }
  },
  computed: {
    ...mapState({
      service: state => state.service,
      websocketAlarm: state => state.webSocket.websocketAlarm,
      stationEvent: state => state.webSocket.stationEvent
    }),
    eventCount() {
      return this.stationEvent ? this.stationEvent.filter(item => !item.flag).length : 0
    },
    window() {
      return this.data && this.data.length > 0 ? { ...this.defaultStyle, ...this.data[0].window } : { ...this.defaultStyle }
    }
  },
  watch: {
    websocketAlarm(val, oldVal) {
      this.isactive = false
      if (this.alarmBell) {
        this.alarmBell.close()
        this.alarmBell = null
      }
      this.alarmBell = this.$notify({
        title: `${val.stationName}${val.point}告警`,
        // message: `${val.tid}-${val.tname}`,
        type: 'warning',
        position: 'bottom-right',
        offset: 30,
        duration: 0,
        onClick: () => { this.onClickAlarm() }
      })
    }
  },
  methods: {
    onClickAlarm() {
      this.alarmBell.close()
      this.isactive = true
      console.log('关闭告警')
      console.log('TODO跳转事件', this.websocketAlarm)
      this.$emit('explorerOpen', { component: 'StationAlarmManagement', data: this.websocketAlarm })
    },
    formatter(row, column) {
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const date = new Date(row.time.length === 13 ? row.time : row.time * 1000)
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      // let s = date.getSeconds();
      return Y + M + D + h + m + '00'
    }
  }
}
</script>
<style scoped>
.task-bar {
  display: flex;
  color: #f4f4f4;
  transition:all 0.2s ease;
  -moz-transition:all 0.2s ease; /* Firefox 4 */
  -webkit-transition:all 0.2s ease; /* Safari and Chrome */
  -o-transition:all 0.2s ease; /* Opera */
}
.task-bar-h {
  opacity: 0;
}
.task-bar-h *{
  visibility: hidden;
}
.task-bar-v *{
  visibility: visible;
}
.task-bar:hover,
.task-bar-v {
  opacity: 1 !important;
}
.task-bar:hover *{
  visibility: visible !important;
}
.task-bar-start-btn {
  display: flex;
  justify-content:center;
  align-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  font-size: 2rem;
}
.task-bar-clock {
  flex-shrink: 0;
  width: 10rem;
}
.task-bar-item-group {
  display:flex;
  flex-wrap: wrap;
  flex-grow: 1;
  flex-shrink: 1;
  overflow-y: auto;
}
.task-bar-item {
  display: flex;
  flex-shrink: 1;
  max-width: 5.5rem;
  margin-right: .1rem;
  padding-right: .4rem;
  border-color: #6f758a #585c6d #414f5a;
  background-color: #4d505f;
}
.task-bar-item-icon {
  display: flex;
  justify-content:center;
  align-items: center;
  flex-shrink: 0;
  width: 1.5rem;
}
.task-bar-item-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 2.5rem;
}
.task-bar-item-active,
.task-bar-start-btn:hover,
.task-bar-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.task-bar-alarm {
  margin-right: 1rem;
  border-right: 1px solid #2a2a2a;
}
.btn-bell {
  height: 100%;
  padding: .5rem;
  margin-right: 1.5rem;
  border-radius: 0;
  font-size: 2rem;
  color: #fff;
}
.btn-bell:hover {
  color: #409EFF;
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.btn-bell /deep/ .el-badge__content {
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
  top: 2px;
}
.img-bell {
  width: 2rem;
  height: auto;
}
</style>
